<template>
  <div class="line-echart">
    <XtEchars :options="lineOptions" width="100%"></XtEchars>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from "vue"
import XtEchars from "@/base_ui/echars"
import { EChartsOption } from "echarts"
import { IDataType } from "./pie-echart.vue"
const props = defineProps<{
  xLabels: string[]
  yLabels: number[]
}>()

const lineOptions = computed<EChartsOption>(() => {
  return {
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: props.xLabels,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: props.yLabels,
        type: "line",
        areaStyle: {},
      },
    ],
  }
})
</script>
<style lang="less" scoped></style>
